<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	form {
    font-family: Arial;
    font-size: 14px;
    width: 300px;
}
	
fieldset {
    border: 1px solid #CCC;
    margin-bottom: 10px;
}
	
fieldset.login input {
    width: 125px;
}
	
legend {
    font-weight: bold;
    font-size: 1.1em;
}
	
label {
    display: block;
    width: 60px;
    text-align: right;
    float: left;
    padding-right: 10px;
    margin: 5px 0;
}
	
input {
    margin: 5px 0;
}
	
input.text {
    padding: 0 0 0 3px;
    width: 172px;
}
	
input.submit {
    margin: 15px 0 0 70px;
}
ul.errors{
	list-style: none;
	background: #ffcece;
	padding: 3px;
	margin: 3px 0  3px 70px;
	font-size: 0.9em;
	width: 165px;
}


</style>
<script src="/js_basic/js/addEvent.js"></script>
<script src="../js/formValidate.js"></script>
<script>	
	
	/* function formValidation(){
		var elem = document.getElementById("age");
		if(!checkRequired(elem)){
			alert("age  check  please");
			return false;
		}

		var elem = document.getElementById("name");
		if(!checkRequired(elem)){
			alert("name required");
			return false;
		}
		
		var elem=document.getElementById("email");
		if(!checkEmail(elem)){
			alert("email is  required");
			return  false;
		}
		
		 var elem=document.getElementById("url");
		
		if(!checkUrl(elem)){
			alert("url  is required");
			return false;
		} 
		
		var elem=document.getElementById("phone");
		if(!checkPhone(elem)){
			alert("phone  is required");
			return false;
		} 
		
		var elem=document.getElementById("date");
		var result=checkDate(elem)
		if(!result){
			alert("date  is required");
			return false;
		}
		
	} */
	
	/* function watchForm(form){
		addEvent(form,'submit',function(){
			return formValidation();
		});
	} */
	
	
window.onload=function(e){
	var form = document.getElementsByTagName("form")[0];
	/* 1. 외부함수에서 이벤트 추가하기
	watchForm(form); */
	/*2. 바로 이벤트 추가하기
	form.onsubmit = function(e){
		return formValidation();
	} */
	
	form.onsubmit = function(e){
		return validateForm(form);
	}
	
	watchFields(form);
	
}
</script>
</head>
<body>
<form action="./a.html" method="post">
	<fieldset class="login">
      <legend>Login Information</legend>
      <label for="username" class="hover">Username</label>
      <input type="text" id="username" class="required text"/><br/>
		
      <label for="password" class="hover">Password</label>
      <input type="password" id="password" class="required text"/>
    </fieldset>
	 <fieldset>
        <legend>Personal Information</legend>
		
        <label for="name">Name</label>
        <input type="text" id="name" class="required text"/><br/>
		
        <label for="email">Email</label>
        <input type="text" id="email" class="required email text"/><br/>
		
        <label for="date">Date</label>
        <input type="text" id="date" class="required date text"/><br/>
		
        <label for="url">Website</label>
        <input type="text" id="url" class="url text" value="http://"/><br/>
		
        <label for="phone">Phone</label>
        <input type="text" id="phone" class="phone text"/><br/>

        <label for="age">Over 13?</label>
        <input type="checkbox" id="age" name="age" value="yes"/><br/>
		
        <input type="submit" value="Submit Form" class="submit"/>
    </fieldset>
</form>
</body>
</html>